XAMLでのカスタムセル

コードを記述する代わりに、XAML によってカスタムセルを作成することもできます。C1FlexGrid の Column オブジェクトには、CellTemplate および CellEditingTemplate プロパティが含まれます。これらのプロパティを使用して、列内のセルを表示および編集するためのビジュアル要素を指定できます。

たとえば、次の XAML コードは、列内の値を表示および編集するために使用されるカスタムビジュアル要素を定義します。この列内のセルは、緑色、太字、中央揃えのテキストで表示されます。テキストは、テキストボックスの横にある編集アイコンを使用して編集します。

マークアップ	コードのコピー
<c1:C1FlexGrid x:Name="_fgTemplated"> <c1:C1FlexGrid.Columns> <!-- テンプレート列を追加します --> <c1:Column ColumnName="_colTemplated" Header="Template" Width="200"> <!-- 表示モードのセルのテンプレート --> <c1:Column.CellTemplate> <DataTemplate> <TextBlock Text="{Binding Name}" Foreground="Green" FontWeight="Bold" VerticalAlignment="Center"/> </DataTemplate> </c1:Column.CellTemplate> <!-- 編集モードのセルのテンプレート --> <c1:Column.CellEditingTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="edit_icon.png" Grid.Column="0" /> <TextBox Text="{Binding Name, Mode=TwoWay}" Grid.Column="1" /> </Grid> </DataTemplate> </c1:Column.CellEditingTemplate> </c1:Column> </c1:C1FlexGrid.Columns> </c1:C1FlexGrid>

マークアップ

コードのコピー

<c1:C1FlexGrid x:Name="_fgTemplated">
<c1:C1FlexGrid.Columns>

<!-- テンプレート列を追加します -->
<c1:Column ColumnName="_colTemplated" Header="Template" Width="200">

<!-- 表示モードのセルのテンプレート -->
<c1:Column.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"
Foreground="Green" FontWeight="Bold"
VerticalAlignment="Center"/>
</DataTemplate>
</c1:Column.CellTemplate>

<!-- 編集モードのセルのテンプレート -->
<c1:Column.CellEditingTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="edit_icon.png" Grid.Column="0" />
<TextBox Text="{Binding Name, Mode=TwoWay}" Grid.Column="1" />
</Grid>
</DataTemplate>
</c1:Column.CellEditingTemplate>
</c1:Column>
</c1:C1FlexGrid.Columns>
</c1:C1FlexGrid>